
<template>
  <a-modal
    :title="'工艺单列表'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
  <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
          <a-form-item label="样衣号" v-if="tableType =='N'">
              <a-input
                allow-clear
                style="width:180px"
                placeholder="请输入样衣号"
                v-model="sampleCode"
              ></a-input>
            </a-form-item>
          <a-form-item label="模版名称" v-if="tableType =='Y'">
              <a-input
                allow-clear
                style="width:180px"
                placeholder="请输入模版名称"
                v-model="tempName"
              ></a-input>
            </a-form-item>
            <a-form-item label="品牌">
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择品牌"
                v-model="brandCode"
                allow-clear
                :filterOption="filterOption"
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item,index) in brandList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="小类">
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择小类"
                v-model="xlCode"
                :filterOption="filterOption"
                allow-clear
              >
                <a-select-option
                  :value="item.code"
                  v-for="(item,index) in xlList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <div class="background">
      <a-card>
        <a-table
         v-if="tableType =='N'"
          :loading="loading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,type:'radio'}"
          :columns="columns"
          :data-source="tableList"
          :pagination="pagination"
          @change="handleTableChange"
        >
        </a-table>
         <a-table
        v-else
          :loading="loading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,type:'radio'}"
          :columns="columns1"
          :data-source="tableList"
          :pagination="pagination"
          @change="handleTableChange"
        >
        
        <template
          slot="styleImg"
          slot-scope="txt, record"
        >
        <img
              :src="record.styleImg"
              :alt="record.styleImg"
              @click="showImg(record.styleImg)"
              style="width:100px;height:100px;object-fit: contain;cursor:pointer"
              v-if="record.styleImg"
            />

        </template>
        </a-table>
      </a-card>
      <div class="info-action">
        <a-button
          type="primary"
          style="margin-left: 8px"
          @click="submit"
        >
          提交
        </a-button>
      </div>
      <BigImg
      :visibleImgs="visibleImgs"
      :imgList="imgList"
      :goToIndex="0"
      @closeBig="closeBig"
    ></BigImg>
    </div>
  </a-modal>

</template>

<script>
import { getList,getDictChildList } from '@api/rd/index'
import BigImg from '@/views/box/components/UserMsg/bigImg'

const columns = [
  {
    title: '工艺单号',
    width: 170,
    dataIndex: 'code'
  },
  {
    title: '单据编号',
    width: 140,
    dataIndex: 'billNo'
  },
  {
    title: '上货季',
    dataIndex: 'scseason'
  },
  {
    title: '品牌',
    dataIndex: 'brand'
  },
  {
    title: '小类',
    dataIndex: 'xl'
  },
  {
    title: '样衣号',
    dataIndex: 'sampleCode'
  },
  {
    title: '品名',
    dataIndex: 'sampleName'
  },
  {
    title: '版次',
    dataIndex: 'bc'
  },

]
const columns1 = [
  {
    title: '工艺单号',
    width: 170,
    dataIndex: 'code'
  },
  {
    title: '模板名称',
    dataIndex: 'tempName'
  },
  {
    title: '款式图',
    dataIndex: 'styleImg',
    scopedSlots: { customRender: 'styleImg' }

  },
  
  // {
  //   title: '关联属性',
  //   scopedSlots: { customRender: 'craftBillRelationVos' }

  // },
]
export default {
  components: {
    BigImg
  },
  props: {
    // brandCode: {
    //   type: String,
    //   default: null
    // },
    // xlCode: {
    //   type: String,
    //   default: null
    // },
    tableType :{
      type: String,
      default: null
    },
  },

  data() {
    return {
      columns,
      columns1,
      nowbrand:'',
      nowXl:'',
      brandCode:undefined,
      xlCode:undefined,
      sampleCode:'',
      prevImageUrl:[],
      imgList:[],
      visibleImgs:false,
      tableList:[],
      form: this.$form.createForm(this),
      brandList:[],
      xlList:[],
      selectedRowKeys: [],
      backId: '',
      tempName:'',
      loading: false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  created() {
    this.loadData()
    this.getBrandList()
    this.getXlList()
  },
  methods: {
    reset() {
      this.$emit('closeCopy')
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.backId = selectedRows[0].id
      this.selectedRowKeys = selectedRowKeys
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    submit() {
      this.$emit('closeCopy', this.backId)
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },
    showImg(url) {
      this.prevImageUrl = []
        this.prevImageUrl.push(url)
      this.imgList = this.prevImageUrl
      // this.goToIndex = index
      setTimeout(() => {
        this.visibleImgs = true
      }, 100)
    },
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 200)
    },
    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取小类列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    handleTableChange(pagination) {
      this.backId = ''
      this.selectedRowKeys = []
      this.pagination = pagination
      this.loadData()
    },
     async loadData(key) {
      this.loading = true
      if(key){
        this.pagination.current = 1
      }
      const params = {
        current: this.pagination.current,
        // size: 10,
        isTemp:this.tableType
      }
      if(this.brandCode){
        params.brand = this.brandCode
      }
      if(this.sampleCode){
        params.sampleCode = this.sampleCode
      }
      
      if(this.tempName){
        params.tempName = this.tempName
      }
      if(this.xlCode){
        params.xl = this.xlCode
      }
      try {
        const res = await getList('bill', params)
        if (res.code == 200) {
          this.tableList = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.info-action {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
</style>